@import '@/styles/variables.scss';

.checkout-page {
  min-height: 100vh;
  background-color: $bg-color;
  padding-bottom: 160rpx;
  
  .section {
    background-color: #fff;
    margin-bottom: 20rpx;
  }
  
  .address-section {
    .address-content {
      display: flex;
      align-items: center;
      padding: 30rpx;
      
      .address-info {
        flex: 1;
        
        .user-info {
          margin-bottom: 10rpx;
          
          .name {
            font-size: 32rpx;
            font-weight: bold;
            margin-right: 20rpx;
          }
          
          .phone {
            font-size: 28rpx;
            color: $text-color-secondary;
          }
        }
        
        .address-detail {
          font-size: 28rpx;
          color: $text-color-primary;
          line-height: 1.4;
        }
      }
      
      .arrow {
        font-size: 30rpx;
        color: $text-color-secondary;
      }
    }
    
    .empty-address {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      
      .add-text {
        font-size: 28rpx;
        color: $text-color-primary;
      }
      
      .arrow {
        font-size: 30rpx;
        color: $text-color-secondary;
      }
    }
    
    .address-divider {
      width: 100%;
      height: 6rpx;
      background-image: linear-gradient(to right, $primary-color 0%, $primary-color 50%, transparent 50%);
      background-size: 12rpx 6rpx;
      background-repeat: repeat-x;
      opacity: 0.8;
    }
  }
  
  .product-section {
    .section-title {
      padding: 20rpx 30rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: $text-color-primary;
      border-bottom: 1rpx solid $border-color-light;
    }
    
    .product-list {
      .product-item {
        display: flex;
        padding: 20rpx 30rpx;
        border-bottom: 1rpx solid $border-color-light;
        
        &:last-child {
          border-bottom: none;
        }
        
        .product-image {
          width: 160rpx;
          height: 160rpx;
          border-radius: 8rpx;
          margin-right: 20rpx;
        }
        
        .product-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          
          .product-name {
            font-size: 28rpx;
            color: $text-color-primary;
            margin-bottom: 10rpx;
            line-height: 1.4;
          }
          
          .product-spec {
            font-size: 26rpx;
            color: $text-color-secondary;
            margin-bottom: 10rpx;
          }
          
          .price-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .price {
              font-size: 30rpx;
              font-weight: bold;
              color: $primary-color;
              
              &::before {
                content: '¥';
                font-size: 70%;
                margin-right: 2rpx;
              }
            }
            
            .quantity {
              font-size: 26rpx;
              color: $text-color-secondary;
            }
          }
        }
      }
    }
  }
  
  .payment-section {
    .section-title {
      padding: 20rpx 30rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: $text-color-primary;
      border-bottom: 1rpx solid $border-color-light;
    }
    
    .payment-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 30rpx;
      
      .payment-name {
        display: flex;
        align-items: center;
        
        .payment-icon {
          width: 50rpx;
          height: 50rpx;
          margin-right: 20rpx;
        }
        
        .name {
          font-size: 28rpx;
          color: $text-color-primary;
        }
      }
      
      .radio {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        border: 1rpx solid $border-color;
        
        &.checked {
          border-color: $primary-color;
          background-color: $primary-color;
          color: #fff;
        }
      }
    }
  }
  
  .amount-section {
    .amount-item {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 30rpx;
      font-size: 28rpx;
      
      .label {
        color: $text-color-secondary;
      }
      
      .value {
        color: $text-color-primary;
        
        &.primary {
          color: $primary-color;
          font-weight: bold;
        }
      }
      
      &.border-top {
        border-top: 1rpx solid $border-color-light;
      }
    }
  }
  
  .remark-section {
    padding: 20rpx 30rpx;
    
    .section-title {
      font-size: 28rpx;
      font-weight: bold;
      color: $text-color-primary;
      margin-bottom: 20rpx;
    }
    
    .remark-input {
      width: 100%;
      height: 160rpx;
      font-size: 26rpx;
      line-height: 1.5;
      padding: 20rpx;
      background-color: $bg-color;
      border-radius: 8rpx;
      box-sizing: border-box;
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    
    .total-info {
      flex: 1;
      
      .total-price {
        font-size: 32rpx;
        font-weight: bold;
        color: $primary-color;
        
        &::before {
          content: '¥';
          font-size: 70%;
          margin-right: 2rpx;
        }
      }
      
      .price-desc {
        font-size: 24rpx;
        color: $text-color-secondary;
      }
    }
    
    .submit-btn {
      width: 220rpx;
      height: 80rpx;
      line-height: 80rpx;
      background-color: $primary-color;
      color: #fff;
      font-size: 28rpx;
      text-align: center;
      border-radius: 40rpx;
    }
  }
} 